<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demand__bsdemand">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-select v-model="dataForm.pcode" placeholder="目录级别">
            <el-option label="选择" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.context" placeholder="内容" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.suggest" placeholder="建议
" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.descripition" placeholder="描述" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button v-if="$hasPermission('demand:bsdemand:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('demand:bsdemand:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item> -->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="pcode" label="目录级别" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column prop="name" label="需求名称" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column prop="context" label="需求内容" header-align="center" align="left">
          <template #default="{ row }">
            <span>{{row.context.length > 40 ? row.context.slice(0, 40) + '...' : row.context}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="suggest" label="需求建议" header-align="center" align="left">
          <template #default="{ row }">
            <span>{{row.suggest.length > 40 ? row.suggest.slice(0, 40) + '...' : row.suggest}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="descripition" label="能力描述" header-align="center" align="left">
          <template #default="{ row }">
            <span>{{row.descripition.length > 40 ? row.descripition.slice(0, 40) + '...' : row.descripition}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="opinion" label="驳回理由" width="150"  header-align="center" align="center" >
          <template #default="{row}">
            <span>{{+row.state === 2 ? row.opinion : '--'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="images" label="图片" header-align="center" align="center"></el-table-column> -->
        <el-table-column prop="state" label="状态" width="80" header-align="center" align="center" :formatter="stateFormatter"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('bsdemand:examine')"  type="text" size="small" @click="handleExamine(scope.row,1)">审核</el-button>
            <!-- <el-button v-if="$hasPermission('bsdemand:reject')"  type="text" size="small" @click="handleExamine(scope.row,2)">驳回</el-button> -->
            <!-- <el-button v-if="$hasPermission('demand:bsdemand:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('demand:bsdemand:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="tableTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
      <!-- <deman-examine v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/> -->
      <el-dialog :visible.sync="addOrUpdateVisible" title="审核" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="dialogForm" ref="dialogForm"  :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
          <el-form-item label="目录级别" prop="pcode">
            <el-select v-model="dialogForm.pcode" placeholder="请选择" :disabled="true">
              <el-option label="人人" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="需求名称" prop="name">
            <el-input v-model="dialogForm.name" placeholder="名称" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="需求内容" prop="context">
            <el-input type="textarea" v-model="dialogForm.context" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="需求建议" prop="suggest">
            <el-input type="textarea" v-model="dialogForm.suggest" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="能力描述" prop="descripition">
            <el-input type="textarea" v-model="dialogForm.descripition" :disabled="true"></el-input>
          </el-form-item>

        </el-form>
        <template slot="footer">
          <el-button @click="dataFormSubmitHandle(2)">驳回</el-button>
          <el-button type="primary" @click="dataFormSubmitHandle(1)">同意</el-button>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demand/bsdemand/page',
        getDataListIsPage: true,
        exportURL: '/demand/bsdemand/export',
        deleteURL: '/demand/bsdemand',
        deleteIsBatch: true
      },
      tableTotal: 0,
      tableData: [],
      dialogVisible: false,
      dialogForm: {},
      dataForm: {
        pcode: '',
        name: '',
        context: '',
        suggest: '',
        descripition: ''
      }
    }
  },
  watch: {
    dataList: {
      handler () {
        this.tableData = []
        this.dataList.map(item => {
          console.log(item.state)
          if (item.state == 0) {
            this.tableData.push(item)
          }
        })
        // this.tableTotal = this.tableData.length
      }
    }
  },
  components: {

  },
  methods: {
    stateFormatter (row, column, cellValue, index) {
      if (row.agree && row.agree == 1) {
        return '同意'
      }
      if (row.reject && row.reject == 2) {
        return '驳回'
      }
      if (cellValue == 1) {
        return '已通过'
      } else if (cellValue == 0) {
        return '审核中'
      } else {
        return '被驳回'
      }
    },
    cancelRequest () {
      this.dialogForm.state = 2
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.dialogForm.opinion = value
        this.$http.put('/demand/bsdemand/', this.dialogForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.dialogForm = {}
              this.addOrUpdateVisible = false
              this.getDataList()
            }
          })
        }).catch(() => {})
      }).catch(() => {

      })
    },
    handleExamine (row) {
      this.addOrUpdateVisible = true
      this.dialogForm = { ...row }
    },
    dataFormSubmitHandle (rowType) {
      if (rowType == 1) {
        this.dialogForm.state = 1
      } else {
        this.cancelRequest()
        return
      }

      this.$http.put('/demand/bsdemand/', this.dialogForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.dialogForm = {}
            this.addOrUpdateVisible = false
            this.getDataList()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>
